<template>
	<div class="app-container">
		<div class="filter-container filter1">
			<span>选择产品：  </span>
			<el-select v-model="productName" placeholder="请选择" @change="changeProduct">
					<el-option
						v-for="item in productOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
		</div>
		<div class="filter-container">
			<span>选择日期：  </span>
				<el-date-picker
						v-model="daterangeDate"
						type="daterange"
						align="right"
						unlink-panels
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:picker-options="pickerOptions2"
						@change="dateChage">
					</el-date-picker>
				<div class="fr">
					<el-button type="primary">查询</el-button>
				</div>
		</div>
		<div class='chart-container'>
			<chart chartTitle='流量分析' height='100%' width='100%'></chart>
		</div>
		<el-table
			:data="tableData"
			border
			style="width: 100%">
			<el-table-column
				prop="statDate"
				label="日期"
				width="180"
				align="center">
			</el-table-column>
			<el-table-column
				prop="showCount"
				label="曝光次数"
				align="center">
			</el-table-column>
			<el-table-column
				prop="clickCount"
				label="点击数"
				align="center">
			</el-table-column>
			<el-table-column
				prop="forwardCount"
				label="跳转数"
				align="center">
			</el-table-column>
			<el-table-column
				prop="clickConvertPrecent"
				label="曝光/点击转化率"
				align="center">
			</el-table-column>
			<el-table-column
				prop="showConvertPrecent"
				label="点击/跳转化率"
				align="center">
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="filtersForm.page"
			:page-sizes="[10, 30, 50, 100]"
			:page-size="filtersForm.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total" class="fr p20">
		</el-pagination>
	</div>
</template>

<script>
import Chart from '@/components/Charts/lineMarker'
import { getQueryByOrg, getXedProductList } from '@/api/flow'
import { getDateStrFormate } from '@/utils/dateFormate'
let loading = {}
console.log("count flow......")
export default {
	name: 'flow',
	components: { Chart },
	data() {
		return {
			productName:'小通帮你还测试产品',
			productOptions:[{
				value: "402435474134925313",
				label: '小通帮你还测试产品'
			}],
			daterangeDate:'',
			pickerOptions2: {
					shortcuts: [{
					text: '最近一个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近半年',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 182);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近半年',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
			width: {
				type: String,
				default: '200px'
			},
			height: {
				type: String,
				default: '200px'
			},
			 tableData: [],
			filtersForm: {
				page: 1,
				pageSize: 10,
				dateFrom: 1514736000000,
				dateTo: 15174144000000,
				productShowId: '402435474134925313'
			},
			total: 50
		}
	},
	methods: {
		// 取数据
		getData(){
			loading = this.$loading({
		          lock: true,
		          text: 'Loading',
		          spinner: 'el-icon-loading',
		          background: 'rgba(0, 0, 0, 0.7)'
		        })
			getQueryByOrg(this.filtersForm).then(cdata => {
				loading.close()
				if(cdata.code === '000000'){
					this.total = cdata.data.totalCount
					this.handleQueryOrgData(cdata.data.records)
					this.handleTableData(cdata.data.records)
				}else{
					 this.$message.error('数据请求错误');
				}
				console.log("getQueryByOrg:",cdata)
			}).catch(error => {
				loading.close()
				this.$message.error('数据请求错误');
				console.log("getQueryByOrg出错：" ,error)
			})
		},
		// 取产品
		getcpData() {
			getXedProductList().then(cpdata => {
				console.log("getXedProductList")
				console.dir(cpdata)
				if(cpdata.code === '000000' && cpdata.data && cpdata.data.records){
					this.handlecpData(cpdata.data.records)
				}
				
			}).catch(error => {
				loading.close()
				this.$message.error('产品请求错误');
				console.log("getXedProductList" ,error)
			})
		},
		// 处理数据
		handleQueryOrgData(darray){
			var chartData = this.handleChartData(darray)
				this.setChartData(chartData)
			if(darray.length == 0) {
				this.$message('没有相关数据');
			}
		},
		// 处理图片数据
		handleChartData(darray){
			var chartData = {
				xAxisData: [],
				yAxisDate:  {showCount:[], clickCount:[],forwardCount:[]}
			}
			for(let i=0,l=darray.length;i<l;i++){
				let tdate = new Date(darray[i].statDate)
				let theDate = getDateStrFormate("yyyy-mm-dd",tdate)
				darray[i].statDate = theDate
				chartData.xAxisData .push(theDate)
				chartData.yAxisDate.showCount.push(darray[i].showCount)
				chartData.yAxisDate.clickCount.push(darray[i].clickCount)
				chartData.yAxisDate.forwardCount.push(darray[i].forwardCount)
			}

			return chartData;
		},
		// 重置chart数据
		setChartData(chartData){
			var chartOption= this.$store.flowChart .getOption("series")
			var chartSeries = chartOption.series
			var chartxAxis= chartOption.xAxis
			console.log("chartYAxis",chartSeries)
			chartSeries[0].data = chartData.yAxisDate.showCount
			chartSeries[1].data = chartData.yAxisDate.clickCount
			chartSeries[2].data = chartData.yAxisDate.forwardCount
			chartxAxis[0].data = chartData.xAxisData
			this.$store.flowChart .setOption({ series: chartSeries, xAxis: chartxAxis })
		},
		// 处理表格数据
		handleTableData(darray){
			for(let i=0,l=darray.length;i<l;i++){
				let tdate = new Date(darray[i].statDate)
				let theDate = getDateStrFormate("yyyy-mm-dd",tdate)
				darray[i].statDate = theDate
				darray[i].clickConvertPrecent = (darray[i].clickConvertPrecent *100) .toFixed(2)+ '%'
				darray[i].showConvertPrecent = (darray[i].showConvertPrecent *100) .toFixed(2)+ '%'
			}
			this.tableData = darray
		},
		// 处理产品数据
		handlecpData(records){
			var cpArray = []
			for(var i=0,l=records.length;i<l;i++){
				let  cpObject = {
						value: records[i].loanShowId,
						label: records[i].baseProduct.description
					}
				cpArray.push(cpObject)
			}
			this.productOptions = cpArray
		},
		// 修改产品
		changeProduct(pv){
			this.filtersForm.productShowId = pv
			this.filtersForm.page = 1
			this.getData()
		},
		// 修改日期
		dateChage(dateObject) {
			console.log("dateChage.........")
			console.dir(dateObject)
			console.dir(this.daterangeDate)
			this.filtersForm.page = 1
			this.filtersForm.dateFrom = dateObject[0].getTime()
			this.filtersForm.dateTo = dateObject[1].getTime()
			this.getData()
		},
		//   修改每页条数
		handleSizeChange(ps){
			this.filtersForm.pageSize = ps
			this.filtersForm.page = 1
			this.getData()
		},
		// 修改 页数
		handleCurrentChange(fp){
			this.filtersForm.page = fp
			this.getData()
		}
	},
	created(){
		this.getcpData()
		this.getData()
		
	},
	mounted(){
	}
}
</script>

<style scoped>
.line{
	text-align: center;
}
.chart-container{
	position: relative;
	padding:20px;
	width: 100%;
	height:65vh;
}
</style>

